<template>
    <nut-dialog no-cancel-btn title="温馨提示" content="确定要支付当前订单吗" v-model:visible="payFlag">
        <template v-slot:footer>

            <nut-row :gutter="10">
                <nut-col :span="12">
                    <div class="flex-content">
                        <nut-button type="default" block @click="payFlag = false">取消</nut-button>
                    </div>
                </nut-col>
                <nut-col :span="12">
                    <!-- :disabled="!formatPhoneInput()" -->
                    <div class="flex-content flex-content-light">
                        <nut-button type="primary" color="linear-gradient(to right, #5232B7,#7237BC)" block
                            @click="onOkPay">确定</nut-button>
                    </div>
                </nut-col>
            </nut-row>

        </template>
    </nut-dialog>
    <div class="order-detail-footer-container">
        <div class="main" :style="{ paddingBottom: `16px` }">
            <div class="price">
                <div class="top">
                    <div class="name">市场价冻结：</div>
                    <div class="value">
                        <nut-price :price="info?.priceAll / 100" v-if="info?.priceAll" style="color: #5232B7;" size="normal"
                            :decimal-digits="2" :thousands="true" />
                    </div>
                </div>
            </div>
            <div class="btn">
                <nut-button block type="primary" color="linear-gradient(to right, #5232B7,#7237BC)"
                    @click="gotoPay">立即付款</nut-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed, toRefs } from "vue";
import Taro from "@tarojs/taro";
import { useTabbarStore } from "../../store";
import { storeToRefs } from "pinia";
import { IconFont } from "@nutui/icons-vue-taro";
import * as orderApi from "../../api/order";

const props = defineProps({
    info: Object,

});
const isRequesting = ref(false); // 标记是否正在发起请求
const payFlag = ref(false);

const { info } = toRefs(props);
const tabbarStore = useTabbarStore();
// 立即付款按钮
const gotoPay = () => {
    payFlag.value = true

}
const onOkPay = async () => {
    if (isRequesting.value) {
        // 如果正在发起请求中，防止重复点击
        return;
    }

    isRequesting.value = true; // 设置为正在发起请求中

    try {
        const result: any = await orderApi.payOrder({ orderNumber: info?.value.orderNumber });
        if (result.state === 202) {
            payFlag.value = false
            Taro.showToast({
                title: result.message,
                icon: "none",
                duration: 3000
            });
        } else if (result.state === 200) {
            Taro.showToast({
                title: "支付成功",
                icon: "none",
                duration: 3000
            });

            Taro.redirectTo({
                url: "/pages/my/index?isSelected=1"
            });
        }

    } finally {
        // 无论请求成功或失败，都重置请求状态，允许下一次点击
        setTimeout(() => {
            isRequesting.value = false;
        }, 1000)
    }
};
</script>
<style lang="scss">
.nut-popup {
    .nut-checkbox {
        // display: flex;
    }
}

.order-detail-footer-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    .main {
        padding-left: 25px;
        padding-right: 25px;
        height: 120px;
        background: #fff;
        display: flex;
        flex-direction: row;

        .price {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            margin-right: 25px;

            .top,
            .bottom {
                display: flex;
                flex-direction: row;
                align-items: flex-end;

                .name {
                    color: #858a99;
                    font-size: 24px;
                }

                .value {
                    height: 35px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }

            .bottom {
                .nut-price {
                    color: #858a99;
                }
            }
        }

        .btn {
            flex: 1;
            width: 250px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
